<style lang="less" scoped>

</style>
<template>
  <el-card>
    <el-row>

      <!--第一个用户信息卡片-->
      <el-col :span="12">
        <el-card style="margin: 5px">
          <div style="height: 260px">


            <el-row >
              <el-col :span="12">
                <div style="height:88px;background-color: #b3d4fc;border-radius: 6px;margin: 8px;padding: 10px">

                  <el-row>
                    <el-col :span="10">
                      <el-avatar shape="square" :size="85" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                    </el-col>
                    <el-col :span="12">
                      <p style="margin-top: 30px;font-weight: bold;">欢迎你：陈飞龙</p>
                    </el-col>
                  </el-row>


                </div>
              </el-col>
              <el-col :span="12">
                <div style="height:88px;background-color: #b3d4fc;border-radius: 6px;margin: 8px;padding: 10px">
                <p style="font-family: 'Andale Mono';font-weight: bold">今天是：2020年9月8日 星期三</p>

                </div>

              </el-col>

            </el-row>


            <el-row style="height: 120px;">
              <el-col :span="24">
                <el-row>
                  <el-col :span="6">
                    <div style="background-color: #b3d4fc;height: 80px;padding: 10px;margin: 10px;border-radius: 12px">
                      <small>
                        风机数
                      </small>
                      <p style="font-weight: bold;color: #83b384;font-size: 20px">80</p>
                    </div>
                  </el-col>

                  <el-col :span="6">
                    <div style="background-color: #b3d4fc;height: 80px;padding: 10px;margin: 10px;border-radius: 12px">
                      <small>
                        风机数
                      </small>
                      <p style="font-weight: bold;color: #83b384;font-size: 20px">80</p>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="background-color: #b3d4fc;height: 80px;padding: 10px;margin: 10px;border-radius: 12px">
                      <small>
                        风机数
                      </small>
                      <p style="font-weight: bold;color: #83b384;font-size: 20px">80</p>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div style="background-color: #b3d4fc;height: 80px;padding: 10px;margin: 10px;border-radius: 12px">
                      <small>
                        风机数
                      </small>
                      <p style="font-weight: bold;color: #83b384;font-size: 20px">80</p>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>





          </div>
        </el-card>
      </el-col>
      <!--第一个用户信息卡片-->
      <el-col :span="12">
        <el-card style="margin: 5px">
          <div style="height: 250px;padding: 5px" id="echarts3">
          </div>
        </el-card>
      </el-col>


    </el-row>

    <el-row>



      <el-col :span="12">
        <el-card style="margin: 5px">
          <div style="height: 250px;padding: 5px" id="echarts2">
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card style="margin: 5px">
          <div style="height: 250px;padding: 5px" id="echarts4">
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>
<script>

  import echarts from 'echarts'
  import 'echarts/theme/macarons.js'
  import echartstyle from './json/echartstyle.json'
  import {request} from 'network/request.js'

  export default {
    name: "home",
    components: {},
    data() {
      return {

      }
    },
    mounted() {
      this.drawEcharts2()
      this.drawEcharts3()
      this.drawEcharts4()
    },
    methods: {
      drawEcharts2() {
        echarts.registerTheme('echartstyle', echartstyle)
        let echarts2 = echarts.init(document.getElementById('echarts2'), 'echartstyle')
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: '邮件营销',
              type: 'bar',
              stack: '广告',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '联盟广告',
              type: 'bar',
              stack: '广告',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '视频广告',
              type: 'bar',
              stack: '广告',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: '搜索引擎',
              type: 'bar',
              data: [862, 1018, 964, 1026, 1679, 1600, 1570],
              markLine: {
                lineStyle: {
                  type: 'dashed'
                },
                data: [
                  [{type: 'min'}, {type: 'max'}]
                ]
              }
            },
            {
              name: '百度',
              type: 'bar',
              barWidth: 5,
              stack: '搜索引擎',
              data: [620, 732, 701, 734, 1090, 1130, 1120]
            },
            {
              name: '谷歌',
              type: 'bar',
              stack: '搜索引擎',
              data: [120, 132, 101, 134, 290, 230, 220]
            },
            {
              name: '必应',
              type: 'bar',
              stack: '搜索引擎',
              data: [60, 72, 71, 74, 190, 130, 110]
            },
            {
              name: '其他',
              type: 'bar',
              stack: '搜索引擎',
              data: [62, 82, 91, 84, 109, 110, 120]
            }
          ]
        };
        echarts2.setOption(option)
      },
      drawEcharts3() {
        echarts.registerTheme('echartstyle', echartstyle)
        let echarts3 = echarts.init(document.getElementById('echarts3'), 'echartstyle')
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: 20,
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
              ]
            }
          ]
        };
        echarts3.setOption(option)
      },
      drawEcharts4() {
        echarts.registerTheme('echartstyle', echartstyle)
        let echarts4 = echarts.init(document.getElementById('echarts4'), 'echartstyle')
        let option = {
          title: {
            text: '折线图堆叠'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '邮件营销',
              type: 'line',
              stack: '总量',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '联盟广告',
              type: 'line',
              stack: '总量',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '视频广告',
              type: 'line',
              stack: '总量',
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: '直接访问',
              type: 'line',
              stack: '总量',
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: '搜索引擎',
              type: 'line',
              stack: '总量',
              data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          ]
        };
        echarts4.setOption(option)
      }
    },
    computed: {},
    watch: {},
  }
</script>
